<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>localStorage</title>
    </head>
    <body>
        <h2>localStorage</h2>
        <button onclick="saveData()">点我保存数据</button>
        <button onclick="readData()">点我读取数据</button>
        <button onclick="deleteData()">点我删除数据</button>
        <button onclick="deleteAllData()">点我清空数据</button>
        <script type="text/javascript">
            
            let p = {name:'张三',age:18};
            console.log(p.toString());

            function saveData(){
                window.localStorage.setItem('msg','你好啊本地存储');//将数据存进浏览器的本地缓存中
                window.localStorage.setItem('msg2',666);
                window.localStorage.setItem('person',JSON.stringify(p));//将对象类型转成json字符串类型
            }

            function readData(){
                console.log(localStorage.getItem('msg'));
                console.log(localStorage.getItem('msg2'));
                let result=localStorage.getItem('person');
                console.log(JSON.parse(result));//将json字符串类型解析成object类型
            }

            function deleteData(){
                localStorage.removeItem('msg');//移除数据
            }

            function deleteAllData(){
                localStorage.clear();//清空数据
            }
        </script>
    </body>
</html>